<script lang="ts" setup>
import type { OrderServerItem } from '@/types/api/order'
import type { Ref } from 'vue'
import { orderApi } from '@/request/api'
import { useAppConfig } from '@/stores'
import { useDayjsFormat, useHideLoading, useLoading, useRouteGuard } from '@/utils'
import { useAliPay } from '@/utils/pay'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { to } from 'await-to-js'
import { isEmpty } from 'lodash-es'
import { ref } from 'vue'
import { object as zobject, string as zstring } from 'zod'

interface ListItem extends OrderServerItem {
  _createdTime: string
}

const appConfig = useAppConfig()

const oid = ref() as Ref<number>
const dataList = ref<ListItem[]>([])

onLoad(async (query) => {
  const zparse = zobject({
    oid: zstring().regex(/^\d+$/).transform(Number),
  }).safeParse(query)
  if (!zparse.success) {
    return await useRouteGuard()
  }
  oid.value = zparse.data.oid
  getList()
})

onPullDownRefresh(async () => {
  await getList()
  uni.stopPullDownRefresh()
})

async function getList() {
  const [err, res] = await to(orderApi.extralist({
    oid: oid.value,
    page: false,
  }))
  if (err) {
    return
  }

  dataList.value = res.map((x: OrderServerItem & Record<string, any>) => {
    x._createdTime = useDayjsFormat(x.createdTime, 'DD')
    return x as ListItem
  })
}

async function handlePay(item: ListItem) {
  useLoading(true)
  const [apiErr, apiRes] = await to(orderApi.newTradePay({
    objId: item.id,
    subject: item.orderTitle,
    totalAmount: item.extraPrice,
    type: 0,
  }))
  useHideLoading()
  if (apiErr) {
    return
  }

  // #ifdef MP-ALIPAY
  await to(useAliPay({ tradeNO: apiRes.trade_no }))
  // #endif

  await getList()
}
</script>

<template>
  <view v-if="!isEmpty(dataList)" class="px-30px pt-20px safe-pb-20px">
    <template v-for="(item, i) in dataList" :key="i">
      <view class="rd-16px bg-white" :class="{ 'mt-10px': i !== 0 }">
        <view class="flex flex-col items-center py-50px text-#3">
          <view class="text-26px">{{ item.extraPrice === 0 ? '[赠送]' : '' }}{{ item.orderTitle }}</view>
          <view class="mt-30px text-36px">￥&thinsp;{{ item.extraPrice }}</view>
        </view>
        <!--  -->
        <view class="flex items-center justify-between px-22px pb-20px">
          <!--  -->
          <view class="flex text-24px">
            <view class="text-#6a">订单日期：</view>
            <view class="text-#3">{{ item._createdTime }}</view>
          </view>
          <!--  -->
          <template v-if="item.extraPrice > 0 ">
            <template v-if="item.status !== 1">
              <view v-if="!appConfig.hidePayBtn" class="btn-primary-black w-160px text-26px lh-60px" @click="handlePay(item)">点击支付</view>
            </template>
            <view v-else class="flex items-center">
              <view class="i-ri:checkbox-circle-fill text-30px text-#60CC84"></view>
              <view class="ml-5px text-24px text-#6">已交租金</view>
            </view>
          </template>
        </view>
      </view>
    </template>
  </view>
  <view v-else class="px-30px py-20px">
    <view class="h-300px rd-16px bg-white"></view>
    <view class="mt-10px h-300px rd-16px bg-white"></view>
    <view class="mt-10px h-300px rd-16px from-white to-transparent bg-gradient-to-b"></view>
  </view>
</template>

<style lang="less" scoped></style>
